<template>
  <div class="bar_hk">
    <div ref="bar" class="bar_echaert"></div>
  </div>
</template>
<script>
import { formatNumberRgx } from "@/assets/js/filters";
export default {
  props: ["childrenList"],
  data() {
    return {
      option: null,
      myChart: null
    };
  },
  mounted() {
    this.$nextTick(function() {
      this.barEchart();
    });
    // console.log(this.childrenList);
  },
  methods: {
    barEchart() {
      this.setOption();
      this.option.xAxis[0].data = this.childrenList.num;
      this.option.series[0].data = this.childrenList.numdata;
      this.myChart = this.$echarts.init(this.$refs.bar);
      this.myChart.setOption(this.option, true);
      var _this = this;
      window.addEventListener("resize", function() {
        _this.myChart.resize();
      });
    },
    setOption() {
      let te = formatNumberRgx;
      return (this.option = {
        tooltip: {
          // 提示器信息
          trigger: "axis",
          position: function(pos, params, dom, rect, size) {
            // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
            // var obj = {top: 60};
            // obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = pos;
            return [pos[0] - 40, 60];
          },
          backgroundColor: "rgba(50,50,50,0.5)",
          confine: true,
          formatter: function (params, ticket, callback) {
            let val = params[0].name.split(",");
            let titleString = "";
            val.forEach((item)=> {
              titleString+= item;
            })
            let formatNum = te(params[0].value);
            var html = '<div>'+ titleString +'</div>';
            html += `<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[0].color};"></span>${params[0].seriesName}:${formatNum}</div>`
            return html;
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow",
            shadowStyle: {
              color: "rgba(150,150,150,0)"
            } // 默认为直线，可选为：'line' | 'shadow'
          },
          triggerOn: "mousemove"
        },
        grid: {
          x: "0%",
          y: "3%",
          top:"5%",
          width: "100%",
          height: "75%"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              show: false,
              alignWithLabel: false
            },
            // 横坐标文本
            axisLabel: {
              color: "#989EB3",
              formatter: function (value) {
                value = value.split(",").join("\n");
                  return value
              },
              // rotate:15,
              interval:0,//横轴信息全部显示    
            },
            axisLine: {
              show: false,
              // lineStyle: {
              //   color: "#eee"
              // }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            show: false
          }
        ],
        series: [
          {
            name: this.$i18n.t("m.Rise_fall"),
            type: "bar",
            barWidth: "50%",
            itemStyle: {
              color: function(params) {
                var colorList=[]
                if(sessionStorage.getItem("color")=='RedRose'){
                  colorList = [
                    "#15A76B",
                    "#15A76B",
                    "#15A76B",
                    "#15A76B",
                    "#15A76B",
                    "#989EB3",
                    "#DD3F3F",
                    "#DD3F3F",
                    "#DD3F3F",
                    "#DD3F3F",
                    "#DD3F3F",
                 ];
                }else{
                  colorList = [
                    "#DD3F3F",
                    "#DD3F3F",
                    "#DD3F3F",
                    "#DD3F3F",
                    "#DD3F3F",
                    "#989EB3",
                    "#15A76B",
                    "#15A76B",
                    "#15A76B",
                    "#15A76B",
                    "#15A76B"
                 ];
                }
                return colorList[params.dataIndex];
              }
            },
            label: {
              normal: {
                show: true,
                position: "top"
              },
            },
            data: []
          }
        ]
      });
    }
  },
  watch: {
    childrenList(val, oldval) {
      this.barEchart();
    }
  }
};
</script>
<style lang="less" scoped>
.bar_hk {
  width: 100%;
  height: calc(100% - 30px);
  .bar_echaert {
    width: 100%;
    height: 100%;
  }
}
</style>